@page "/snackbars"
@inherits BasePage
@using MduiBlazor.Shared.Pages.Examples.Snackbars

<PageTitle>Snackbar</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">Snackbar</MduiText>
    <p>Snackbar 会在窗口下方出现一个小的弹出框，它们可以在超时或用户触摸屏幕其他地方后自动消失。</p>
    <p>屏幕上可以同时显示多个 Snackbar，如果在 Snackbar 还未关闭时就打开下一个 Snackbar，则下一个 Snackbar 会被加入队列，并依次关闭。</p>
</div>

<PageContent>
    <PageContentItem Title="使用方法" OnClick="@(_=>ScrollToElementById("usage"))" />
    <PageContentItem Title="示例" OnClick="@(_=>ScrollToElementById("examples"))">
        <PageContentItem Title="普通 Snackbar" OnClick="@(_=>ScrollToElementById("simple"))" />
        <PageContentItem Title="带关闭按钮的 Snackbar" OnClick="@(_=>ScrollToElementById("closable"))" />
        <PageContentItem Title="不同位置的 Snackbar" OnClick="@(_=>ScrollToElementById("position"))" />
        <PageContentItem Title="不同颜色的 Snackbar" OnClick="@(_=>ScrollToElementById("color"))" />
        <PageContentItem Title="自定义 Snackbar 内容" OnClick="@(_=>ScrollToElementById("custom"))" />
    </PageContentItem>
    <PageContentItem Title="组件参数" OnClick="@(_=>ScrollToElementById("attr"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="usage">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">使用方法</MduiText>
    </h2>
    <p class="mdui-typo">Snackbar 依赖于<code>MduiSnackbarProvider</code>和<code>SnackbarService</code>。</p>

    <MduiText Typo="@Typo.subheading"><b>1. 全局依赖</b></MduiText>
    <p class="mdui-typo">
        在<code>MainLayout</code>布局中加入<code>MduiSnackbarProvider</code>组件。为应用主题，建议将组件放置于<code>MduiLayout</code>中。</p>
    <ExampleSection HideExample Component="@typeof(SnackbarLayoutDependant)" />

    <MduiText Typo="@Typo.subheading"><b>2. 注入服务</b></MduiText>
    <CodeSnippet>@@inject SnackbarService SnackbarService</CodeSnippet>
    <CodeSnippet Language="CSharp">@("[Inject]\rprivate SnackbarService SnackbarService { get; set; }")</CodeSnippet>

    <MduiText Typo="@Typo.subheading"><b>3. 调用实例</b></MduiText>
    <CodeSnippet Language="CSharp">SnackbarService.ShowSnackbar("Title", options);</CodeSnippet>
    <CodeSnippet Language="CSharp">SnackbarService.ShowSnackbar&lt;TComponent&gt;(parameters, options);</CodeSnippet>
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="examples">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">示例</MduiText>
    </h2>

    <MduiText id="simple" Typo="@Typo.subheading"><b>普通 Snackbar</b></MduiText>
    <ExampleSection Component="@typeof(SimpleSnackbar)" />

    <MduiText id="closable" Typo="@Typo.subheading"><b>带关闭按钮的 Snackbar</b></MduiText>
    <ExampleSection Component="@typeof(ClosableSnackbar)" />

    <MduiText id="position" Typo="@Typo.subheading"><b>不同位置的 Snackbar</b></MduiText>
    <ExampleSection Component="@typeof(PositionsSnackbar)" />

    <MduiText id="color" Typo="@Typo.subheading"><b>不同颜色的 Snackbar</b></MduiText>
    <ExampleSection Component="@typeof(ColorSnackbar)" />

    <MduiText id="custom" Typo="@Typo.subheading"><b>自定义 Snackbar 内容</b></MduiText>
    <ExampleSection Component="@typeof(CustomSnackbar)" />
    <ExampleSection HideExample Component="@typeof(SnackbarContent)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="attr">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">组件参数</MduiText>
    </h2>

    <MduiTableContainer UseMduiTypo Class="mdui-m-y-1">
         <MduiSimpleTable>
             <thead>
                 <th>组件</th>
                 <th>参数名称</th>
                 <th>类型/返回类型</th>
                 <th>说明</th>
             </thead>
             <tbody>
                 <tr>
                     <th rowspan="3">
                         <code>MduiSnackbarProvider</code>
                     </th>
                     <td>
                         <code>RemoveSnackbarOnNavigate</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否在导航时移除队列中的Snackbar。默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>MaxItemsShown</code>
                     </td>
                     <td>
                         <code>int</code>
                     </td>
                     <td>能够同时显示的最大 Snackbar 数量。默认<code>10</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Options</code>
                     </td>
                     <td>
                         <code>SnackbarOptions</code>
                     </td>
                     <td>全局 Snackbar 设置项。</td>
                 </tr>
                 <tr>
                     <th>
                         <code>MduiSnackbar</code>
                     </th>
                     <td>
                         <code>Close</code>
                     </td>
                     <td>公共方法</td>
                     <td>关闭该 Snackbar。一般用于自定义 Snackbar 内容。</td>
                 </tr>
             </tbody>
         </MduiSimpleTable>
     </MduiTableContainer>
 </div>
